<template>
  <div v-title data-title="ForFun Find Yourself">
    <el-container>
      <el-main class="me-articles">
        <el-card class="box-card">
          <!-- 头部 -->
          <div slot="header" class="clearfix">
            <!-- 标题区域 -->
            <div class="title">
              <span>文章管理</span>
            </div>
          </div>
          <!-- 查询区域 -->
          <div class="search">
            <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
              <el-form-item label="标题:">
                <el-input
                  placeholder="请输入查询的标题"
                  v-model="queryInfo.query"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" icon="el-icon-search" @click="search"
                  >查询</el-button
                >
                <el-button
                  type="warning"
                  icon="el-icon-refresh-right"
                  @click="clear"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格内容回显 -->
          <div class="info" style="width: 100%">
            <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column prop="title" label="标题" width="180">
              </el-table-column>
              <el-table-column prop="summary" label="摘要" width="180">
              </el-table-column>
              <el-table-column prop="content" label="内容" width="180">
              </el-table-column>
              <el-table-column prop="nickname" label="作者" width="180">
              </el-table-column>
              <el-table-column prop="viewNum" label="访问量" width="180">
              </el-table-column>
              <el-table-column
                prop="commentNum"
                label="评论量"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="tags"
                label="标签"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="categoryId"
                label="分类"
                width="180"
              ></el-table-column>

              <el-table-column
                label="操作"
                width="180"
                fixed="right"
                align="center"
              >
                <template slot-scope="scope">
                  <!-- 修改操作按钮 -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="edit(scope.row)"
                  >
                  </el-button>
                  &nbsp;
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDelete(scope.row.id)"
                  >
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      slot="reference"
                    ></el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页区域 -->
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNo"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-card>
        <!-- 添加编辑框 -->
        <el-dialog
          :title="addTitle"
          :visible.sync="addVisible"
          @close="addClose"
          width="590px"
          append-to-body
        >
          <el-form
            ref="addFormRef"
            :inline="true"
            :model="addForm"
            :rules="rules"
            size="small"
            label-width="66px"
          >
            <el-form-item label="标题" prop="title">
              <el-input v-model="addForm.username" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="addClose">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
          </div>
        </el-dialog>
        <!-- 修改编辑框 -->
        <el-dialog
          :title="editTitle"
          :visible.sync="editVisible"
          @close="editClose"
          width="590px"
          append-to-body
        >
          <el-form
            ref="editFormRef"
            :inline="true"
            :model="editForm"
            :rules="editRules"
            size="small"
            label-width="66px"
          >
            <el-form-item label="标题" prop="title">
              <el-input v-model="editForm.title" />
            </el-form-item>
            <el-form-item label="摘要" prop="summary">
              <el-input v-model="editForm.summary" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="editForm.content" />
            </el-form-item>
            <el-form-item label="作者" contentprop="nicnname">
              <el-input v-model="editForm.nickname" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="editClose">取消</el-button>
            <el-button type="primary" @click="editSubmit">确认</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getArticlesByTitle, deleteArticle } from "@/api/blog";
export default {
  name: "Article",
  data() {
    return {
      loading: true,
      show: false,
      total: 0,
      queryInfo: {
        query: "",
        pageNo: 1,
        pageSize: 10,
      },
      tableData: [],
      form: {},
      editVisible: false,
      addVisible: false,
      addForm: {
        title: "",
        nickname: "",
        summary: "",
        content: "",
        viewNum: "",
        commentNum: "",
        tags: "",
        categoryId: "",
      },
      editForm: {
        title: "",
        nickname: "",
        summary: "",
        content: "",
        viewNum: "",
        commentNum: "",
        tags: "",
        categoryId: "",
      },
      addTitle: "添加文章",
      editTitle: "修改文章",
      rules: {
        nickname: [{ required: true, trigger: "blur" }],
        title: [{ required: true, trigger: "blur", message: "请输入姓名" }],
        summary: [{ required: true, trigger: "blur" }],
        tags: [{ required: true, trigger: "change" }],
        categoryId: [{ required: true, trigger: "change" }],
      },
      editRules: {
        nickname: [{ required: true, trigger: "blur" }],
        title: [{ required: true, trigger: "blur", message: "请输入姓名" }],
        summary: [{ required: true, trigger: "blur" }],
        tags: [{ required: true, trigger: "change" }],
        categoryId: [{ required: true, trigger: "change" }],
      },
    };
  },

  methods: {
    search() {
      this.getAllArticles();
    },
    //清除查询条件并刷新
    clear() {
      this.queryInfo.query = "";
      this.getAllArticles();
    },
    getAllArticles() {
      const that = this;
      getArticlesByTitle(this.queryInfo).then((resp) => {
        if (resp.code == 200 && resp.result != null) {
          that.tableData = resp.result.list;
          that.total = resp.result.total;
          this.$message({
            showClose: true,
            message: "查询成功",
            type: "success",
            duration: 1500,
          });
        } else {
          that.tableData = [];
          that.total = 0;
          that.$message({
            showClose: true,
            message: resp.message,
            type: "warning",
            duration: 1500,
          });
        }
      });
    },
    add() {
      this.addVisible = true;
    },
    handleDelete(record) {
      console.log("delete");
      const that = this;
      deleteArticle({ id: record }).then((resp) => {
        if (resp.code == 200) {
          let totalPage = Math.ceil(
            (this.total - 1) / this.queryInfo.page.pageSize
          ); // 总页数
          let currentPage =
            this.queryInfo.pageNo > totalPage
              ? totalPage
              : this.queryInfo.pageNo;
          this.queryInfo.pageNo = currentPage < 1 ? 1 : currentPage;
          this.$message.success("删除成功");
          that.getAllArticles();
        } else {
          this.$message.error("系统异常,请稍后再试");
        }
      });
    },
    edit(record) {
      this.form = record;
      this.editVisible = true;
      this.editForm = record;
      this.$router.push("/article/write/" + record.id);
    },
    addClose() {
      this.addVisible = false;
      this.addForm.role = "";
      this.addForm.dep = "";
      this.addForm.sex = "";
      this.$refs.addFormRef.resetFields();
    },
    editClose() {
      this.editVisible = false;
      this.editForm = this.form;
      console.log("close", this.form);
    },
    //提交修改表单
    editSubmit() {
      const that = this;
      //发起添加的网络请求
      updateUser(this.editForm)
        .then((response) => {
          if (response.code == 200) {
            this.$message.success(response.message);
            this.getAllUser();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch((error) => {
          this.$message.warning("系统异常，请稍后重试");
          console.log(error);
        });
      that.editClose();
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getAllArticles();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNo = newPage;
      this.getAllArticles();
    },
  },
  created() {
    this.getAllArticles();
  },
};
</script>

<style scoped>
.el-container {
  width: 1200px;
}

.el-main {
  padding: 0px;
  line-height: 16px;
}

.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 20px;
}
</style>
